<template>
  <div class="container">
    <el-card class="box-card">
      <div class="add">
        <el-button type="success" icon="el-icon-edit" @click="$router.push({ path: '/questions/new' })">新增试题</el-button>
      </div>
      <el-form ref="form" :model="form" label-width="80px" label-position="right">
        <el-form-item label="学科">
          <el-select v-model="form.subjectID" placeholder="请选择学科">
            <el-option :label="item.label" :value="item.value" v-for="(item, index) in subjectsList"
              :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级科目">
          <el-select placeholder="请选择二级科目" v-model="form.catalogID">
            <el-option :label="item.label" :value="item.value" v-for="(item, index) in secondList"
              :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签">
          <el-select v-model="form.tags" placeholder="请选择标签">
            <el-option :label="item.label" :value="item.value" v-for="(item, index) in simpleList"
              :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键字">
          <el-input v-model="form.keyword" placeholder="请根据题干搜索"></el-input>
        </el-form-item>
        <el-form-item label="试题类型">
          <el-select v-model="form.questionType" placeholder="请选择试题类型">
            <el-option label="单选" :value="1"></el-option>
            <el-option label="多选" :value="2"></el-option>
            <el-option label="简答" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="难度">
          <el-select v-model="form.difficulty" placeholder="请选择难度">
            <el-option label="简单" :value="1"></el-option>
            <el-option label="一般" :value="2"></el-option>
            <el-option label="困难" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向">
          <el-select v-model="form.direction" placeholder="请选择方向">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="录入人">
          <el-select v-model="form.creatorID" placeholder="请选择录入人">
            <el-option :label="item.username" :value="item.id" v-for="item in userList" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题目备注">
          <el-input v-model="form.remarks"></el-input>
        </el-form-item>
        <el-form-item label="企业简称">
          <el-input v-model="form.shortName"></el-input>
        </el-form-item>
        <el-form-item label="城市">
          <el-select v-model="form.province" placeholder="请选择城市">
            <el-option :label="item" :value="item" v-for="item in provinces" :key="item.id"></el-option>
          </el-select>
          <el-select v-model="form.city" placeholder="请选择城市">
            <el-option :label="item" :value="item" v-for="item in citys" :key="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button @click="resetForm">清除</el-button>
          <el-button type="primary" @click="onSubmit('key')">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-alert :title="'数据一共：' + total + '条'" type="info" show-icon :closable="false">
      </el-alert>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="number" label="试题编号" width="120">
        </el-table-column>
        <el-table-column prop="subject" label="学科" width="80">
        </el-table-column>
        <el-table-column prop="catalog" label="目录 " width="100">
        </el-table-column>
        <el-table-column prop="questionType" label="题型" width="80">
          <template #default="{ row }">
            {{
              row.questionType == 1
              ? "单选"
              : row.questionType == 2
                ? "多选"
                : "简单"
            }}
          </template>
        </el-table-column>
        <el-table-column prop="question" label="题干">
          <template #default="{ row }">
            <p v-html="row.question"></p>
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间"> </el-table-column>
        <el-table-column prop="difficulty" label="难度" width="80">
          <template #default="{ row }">
            {{
              row.difficulty == 1
              ? "简单"
              : row.difficulty == 2
                ? "一般"
                : "困难"
            }}
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人" width="120">
        </el-table-column>
        <el-table-column prop="address" label="操作" width="200">
          <template #default="{ row }">
            <el-button type="primary" plain icon="el-icon-view" circle @click="openDetail(row)"></el-button>
            <el-button type="success" plain icon="el-icon-edit" circle
              @click="$router.push({ path:  `/questions/new?id=${row.id}` })"></el-button>
            <el-button type="danger" plain icon="el-icon-delete" circle @click="deleteQuestion(row, 'del')"></el-button>
            <el-button type="warning" plain icon="el-icon-check" circle @click="deleteQuestion(row, 'add')"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
        :page-sizes="[5, 10, 15, 20]" :page-size="100" background :total="total" layout="sizes,prev, next,pager, jumper">
      </el-pagination>
    </el-card>
    <!-- 弹出框 -->
    <questionPreviewDialog :id="detailId" v-if="centerDialogVisible" v-model="centerDialogVisible" />
    <!-- 操作提示框 -->
    <questionOperateDialog :id="detailId" v-if="OperateDialogVisible" v-model="OperateDialogVisible" :type="type"
      @updata="getList()" />
  </div>
</template>

<script>
import { list, subjectsList, secondList } from '@/api/hmmm/questions.js'
import { simple } from '@/api/hmmm/tags.js'
import { provinces, citys } from '@/api/hmmm/citys.js'

import questionPreviewDialog from '@/module-hmmm/components/questions-preview.vue'
import questionOperateDialog from '@/module-hmmm/components/questions-operate.vue'

export default {
  components: {
    questionPreviewDialog,
    questionOperateDialog
  },
  data () {
    return {
      form: {
        page: 1,
        pagesize: 5,
        subjectID: '',
        difficulty: '',
        questionType: '',
        tags: '',
        province: '',
        city: '',
        keyword: '',
        remarks: '',
        shortName: '',
        direction: '',
        catalogID: '',
        creatorID: ''
      },
      tableData: [
      ],
      // 学科列表
      subjectsList: [],
      // 二级学科列表
      secondList: [],
      // 标签列表
      simpleList: [],
      currentPage4: 1,
      // 题目详情id
      detailId: 0,
      // 弹出框显示控制变量
      centerDialogVisible: false,
      OperateDialogVisible: false,
      // 类型
      type: '',
      // 题目总数
      tatal: 0,
      // 录入人
      userList: [],
      // 城市
      provinces: [],
      citys: []
    }
  },
  created () {
    this.getList()
    this.getSubjectsList()
    this.getUserList()
    this.getProvinces()
  },
  watch: {
    form: {
      handler (newName, oldName) {
        console.log(222)
        this.getSecondList(newName.subjectID)
        this.getTagsList(newName.subjectID)
      },
      // immediate:true代表如果在 wacth 里声明了obj之后，就会立即先去执行里面的handler方法，
      immediate: true,
      deep: true // 开启深度监听，默认是false
    },
    'form.province': {
      handler (newName, oldName) {
        this.getCitys()
      }
    }

  },
  methods: {
    onSubmit (key) {
      this.getList(key)
      this.getSubjectsList()
    },
    handleSizeChange (val) {
      console.log(val)
      this.form.pagesize = val
      this.getList()
    },
    // 分页器页码改变时
    handleCurrentChange (val) {
      console.log(val)
      this.form.page = val
      this.getList()
    },
    // 基础题库列表
    async getList (type) {
      let res = {}
      if (type === 'key') {
        res = await list({
          page: this.form.page,
          pagesize: this.form.pagesize,
          subjectID: this.form.subjectID,
          keyword: this.form.keyword
        })
        console.log(444444)
      } else {
        console.log(1111)
        res = await list({
          page: this.form.page,
          pagesize: this.form.pagesize
        })
      }
      this.total = res.data.counts
      this.tableData = res.data.items
    },
    // 获取学科列表
    async getSubjectsList () {
      const res = await subjectsList()
      this.subjectsList = res.data
    },
    // 获取二级学科列表
    async getSecondList (id) {
      const res = await secondList({ subjectID: id })
      this.secondList = res.data
    },
    // 获取标签列表
    async getTagsList (id) {
      const res2 = await simple({ subjectID: id })
      this.simpleList = res2.data
      // console.log(res2)
    },
    // 重置表单
    resetForm () {
      this.form = {}
    },
    // 打开弹出框
    openDetail (row) {
      this.centerDialogVisible = true
      // 传递题目id
      this.detailId = row.id
    },
    // 删除题目
    async deleteQuestion (row, type) {
      this.OperateDialogVisible = true
      // 传递题目id
      this.detailId = row.id
      this.type = type
      console.log(row)
    },
    // 获取录入人
    async getUserList () {
      const res = await person()
      this.userList = res.data
    },
    // 获取省份城市
    async getProvinces () {
      const res = await provinces()
      console.log(res)
      this.provinces = res
    },
    // 获取省份城市
    async getCitys () {
      const res = await citys()
      console.log(res)
      this.citys = res
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  margin: 10px;

  .add {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
  }

  .el-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .el-pagination {
    float: right;
    margin: 20px 0;
  }
}
</style>
